<template>
  <DialogBox
    :visible="boxVisibility"
    @update:visible="boxVisibility = $event"
    resize
    max-height="700"
    :title="titleRef"
    width="80%"
    :close-on-click-modal="false"
  >
    <Grid :data="tableData" border max-height="500">
      <GridColumn type="index" width="60"></GridColumn>
      <GridColumn field="sku" title="SKU"></GridColumn>
      <GridColumn field="spu" title="款号" min-width="60"></GridColumn>
      <GridColumn field="store" title="店铺" min-width="60"></GridColumn>
      <GridColumn field="brand" title="品牌" min-width="60"></GridColumn>
      <GridColumn field="property" title="属性">
        <template #default="data">
          <div v-if="data.row.property &&  data.row.property.length">
            <div v-for="item in data.row.property" :key="item.attr_name">
              <div>{{ item.attr_name }}: {{ item.attr_value }}</div>
            </div>
          </div>
        </template>
      </GridColumn>
      <GridColumn field="category" title="分类"></GridColumn>
      <GridColumn field="product_material" title="产品材质"></GridColumn>
      <GridColumn field="amount" title="采购量"></GridColumn>
      <GridColumn field="expect_delivery" title="预计到货时间"></GridColumn>
    </Grid>
    <template #footer>
      <Button type="primary" @click="boxVisibility = false"> 关闭 </Button>
    </template>
  </DialogBox>
</template>

<script setup>
import { Button, DialogBox, Grid, GridColumn } from '@opentiny/vue'
import { getPurchaseOrderDetail } from '@/request/api'
import { ref } from 'vue'
const boxVisibility = ref(false)
const titleRef = ref('工单详情 ')
const tableData = ref([])
const open = (row) => {
  boxVisibility.value = true
  getPurchaseOrderDetail(row.order_id).then(res => {
    if (res?.data?.ret === 0) {
      tableData.value = res.data.result
    }
  })
} 
defineExpose({
  open
})
</script>

<style scoped>
</style>